@model String

@{
    ViewBag.Title = "Timeline";
    String url = string.Format("/api/internal/timeline/{0}?JSON=true", Model);
}
<form id="timelineForm" action="" method="post">
<div class="container">
    <div class="row-fluid">
        <div class="span10 offset1">
            <h2>@ViewBag.Title</h2>
        </div>
    </div>
    <div class="row-fluid row-search">
        <div class="span2 offset1">
            <div class="form-horizontal">
                <fieldset>
                    <label class="control-label" for="startDate">Start Date</label>
                    <div class="controls">
                        <input type="text" id="startDate" class="input-small datepicker" />
                    </div>
                </fieldset>
            </div>
        </div>
        <div class="span2">
            <div class="form-horizontal">
                <fieldset>
                    <label class="control-label" for="endDate">End Date</label>
                    <div class="controls">
                        <input type="text" id="endDate" class="input-small datepicker" />
                    </div>
                </fieldset>
            </div>
        </div>
        <div class="span4 offset1">
            <div class="form-horizontal">
                <fieldset>
                    <label class="control-label" for="searchTerm">Term</label>
                    <div class="controls">
                        <input type="text" id="searchTerm" class="input-large" />
                    </div>
                </fieldset>
            </div>
        </div>
        <div class="span1">
            <input id="searchButton" type="submit" value="Search" class="btn" />
        </div>
    </div>
    <div class="row-fluid">
        <div class="span10 offset1">
            <div id="my-timeline"></div>
        </div>
    </div>
</div>
</form>
@section Scripts {
    <script type="text/javascript">
       
        $(document).ready(function() {
            createStoryJS({
                type:       'timeline',
                width:      '100%',
                height:     '600',
                source:     '@url',
                embed_id:   'my-timeline'
            });
        });
        $(function () {
            $(".datepicker").datepicker();
        });
        $("#timelineForm").submit(function () {
            $("#storyjs").remove();
            createStoryJS({
                type: 'timeline',
                width: '100%',
                height: '600',
                source: '@url' +
                    '&startdate=' + $("#startDate").val() +
                    '&enddate=' + $("#endDate").val() +
                    '&searchterm=' + $("#searchTerm").val() +
                    '&', // Hack because the timeline tacks a ?callback=onJSONP_Data on the end of every URL
                // example http://localhost:54368/api/internal/timeline/50b91ed557a85b0234777ae3?JSON=true&startdate=12/12/2012&enddate=12/12/2012&searchterm=1234&?callback=onJSONP_Data
                embed_id: 'my-timeline'
            });
            return false;
        });
    </script>
}